Yuri Oliveira Gochi
·Follow
2 min read·Mar 20, 2023--
Qual a diferença entre essas duas poderosas funções no NextJs.
O NextJs é amplamente usado por empresas relevantes no mercado de tecnologia, como a Netflix, Uber, Tiktok, Apple e etc. Sabendo da relevância desse framework no mercado, precisamos entender o porquê é tão utilizado e saber diferenciar duas das suas funcionalidades mais poderosas: O getStaticProps e getServerSideProps.
ContextualizaçãoQuando utilizamos uma arquitetura do lado do cliente(client-side) acontece por baixo dos panos a espera do pacote que contém todo o javascript, esse carregamento do bundle faz com que a performance do site diminua, gerando problemas em usuários com dispositivos móveis antigos ou conexões fracas. Além de performance, também há os motores de busca, o SEO ainda tem dificuldade em indexar os aplicativos Javascript no lado do cliente, então já que a página estática (HTML) é carregada antes de estar com todo o conteúdo (dados vindo do servidor), acaba acontecendo que os mecanismos de pesquisa não encontra o conteúdo para ser indexado.
Em resumo, utilizamos o NextJs para que os navegadores possam encontrar dentro da nossa página o conteúdo relevante que o usuário está pesquisando.
Qual a diferença entre getStaticProps e getServerSideProps?getStaticPropsUsando este método a página busca os dados do servidor durante o momento do build;Este método gera uma renderização muito mais rápida da página, por que ele permite que a página seja gerada de forma estática;Como os dados são gerados antes de alcançar o lado do usuário, o SEO da página melhora muito.getServerSidePropsEste método busca os dados no momento que o usuário dispara um requisição na página;Como os dados são atualizados toda vez que o usuário carrega a página, é possível ver sempre a informação mais atualizada;Como os dados são gerados antes de alcançar o lado do usuário, o SEO da página melhora muito.ConclusãoAmbas funcionalidades irão trazer melhora no SEO da sua página, basta entender qual a sua necessidade, algumas dessas dúvidas você pode encontrar a resposta que procura.
Preciso pré-renderizar uma página cujo os dados devem ser buscados no momento da requisição — getServerSideProps;Preciso dos dados sempre mais atualizados possíveis, mesmo que isso comprometa um pouco na performance da minha página — getServerSideProps;Os dados podem ser armazenados em cache publicamente — getStaticProps;Os dados podem ser buscados apenas no momento do build — getStaticProps;Preciso de performance na entrega dos meus dados e da minha página — getStaticProps.
Referências:https://nextjs.org/docs/basic-features/data-fetching/get-server-side-propshttps://nextjs.org/docs/basic-features/data-fetching/get-static-propshttps://medium.com/eincode/next-js-data-fetching-getstaticprops-vs-getserversideprops-fcbf43d0ccachttps://webera.blog/next-js-conceitos-de-ssr-e-roteamento-b%C3%A1sico-d22b32bdc0bf